
<!DOCTYPE html >

<html >

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Free Online WYSIWYG Math support MathML,Latex output</title>
    <link rel="icon" href="img/sum.ico" >
     <meta name="description" content="MathJQ  is online WYSIWYG math MathJQ help you creates Latex code instanly and testing equations . Produces code for directly embedding equations into HTML websites, forums or blogs,also embed code into other application like Word,Open source,Web application support Latex,MathML.">
    <meta name="keywords" content="WYSIWYG math,Tex,like MathType, LaTeX,Tex editor, formula editor, math editor, Jquery ,online write equations,online equations,online Latex, make equations, equation editor, equations, HTML5,HTML, online, open source, mathjax, instantly rendered, customisable, instant preview">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 2015 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <link href="jq/css/M.css" rel="stylesheet" />
    <link href="jq/js/css/b.css" rel="stylesheet" />
    <link rel="stylesheet" href="jquery-ui/jquery-ui.css">
    <link rel="stylesheet" href="jquery-ui/jquery-ui.theme.min.css">
    <script src="jq/js/jquery/jquery-1.10.2.js"></script>
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <script type="text/javascript">
    function toMathML(jax,callback) {
          var mml;
          try {
            mml = jax.root.toMathML("");
            
          } catch(err) {
            if (!err.restart) {throw err} // an actual error
            return MathJax.Callback.After([toMathML,jax,callback],err.restart);
          }
          MathJax.Callback(callback)(mml);
        }
    </script>
    <script src="jq/js/jquery/optimize.js"></script>  
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });
    </script>
    <script type="text/x-mathjax-config">
                    MathJax.Hub.Config({ "HTML-CSS": { scale: 100} });
    </script>
   <script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>

<body>
    <header style="margin-left:15px;margin-right:15px" class="row">
            <div class="row navbar navbar-default  " style="position:absolute;top:0;float:left">
                <ul class="nav nav-tabs " role="tablist" id="equation-tab">
                    <li><a href="#layout" role="tab" data-toggle="tab">Layout</a></li>
                    <li class="active"><a href="#basicmath" role="tab" data-toggle="tab">Basic Math</a></li>
                    <li><a href="#arrow" role="tab" data-toggle="tab">Arrows</a></li>              
                    <li><a href="#logarit" role="tab" data-toggle="tab">Trigonometry</a></li>
                    <li><a href="#integral" role="tab" data-toggle="tab">Integral</a></li>
                    <li><a href="#calculus" role="tab" data-toggle="tab">Calculus</a></li>
                    <li><a href="#more" role="tab" data-toggle="tab">Symbol1</a></li>
                    <li><a href="#symbols" role="tab" data-toggle="tab">Symbol2</a></li>
                    <li><a href="#matrix" role="tab" data-toggle="tab">Matrix</a></li>
                    <li><a href="#cases" role="tab" data-toggle="tab">Cases</a></li>
                    
                </ul>

                <div id="tab-content" class="tab-content" style="">
                  <button id="closepane" class="btn btn-danger btn-sm" style="float:right">X</button>
                  <div class="tab-pane  table-responsive" id="layout"></div>
                  <div class="tab-pane  table-responsive  active" id="basicmath"></div>
                  <div class="tab-pane  table-responsive" id="arrow"></div>
                  <div class="tab-pane  table-responsive" id="matrix"></div>
                  <div class="tab-pane  table-responsive" id="cases"></div>
                  <div class="tab-pane  table-responsive" id="logarit"></div>
                  <div class="tab-pane  table-responsive" id="integral"></div>
                  <div class="tab-pane  table-responsive" id="calculus"></div>
                  <div class="tab-pane  table-responsive" id="more"></div>
                  <div class="tab-pane  table-responsive" id="symbols"></div>

                </div>
            </div>
             <div  style="top:0;float:right;width:250px;height:200px;margin:0;padding:0"></div>
        </header>
    <div class="container">
        
       
        <div style="padding-top: 60px;margin-top:50px" class="row">
             <div class="col-lg-6 col-md-6 col-sm-6" >
                <p style="text-align:center;font-size:20px;"><span class="glyphicon glyphicon-arrow-down"></span>WYSIWYG Math<span class="glyphicon glyphicon-arrow-down"></span></p>
               
                <div id="math-parent" class="col-sm-12" style="padding:0" >
                    <div style="" id="editable-math" class="col-lg-6 col-md-6 col-sm-6 mathquill-editable" title="Editor">
                    </div>  
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12" style="margin-top:10px">
                    <button class="btn btn-primary btn-sm col-lg-4 col-sm-4 col-xs-4" onclick="passValue()">Test Equations</button>
                    <!-- <button class="btn btn-success btn-sm " onclick="getLatex(1)">Get Latex code</button>
                    <button class="btn btn-success btn-sm " onclick="getImage(1)">Download Image </button> -->
                    <button class="btn btn-danger btn-sm col-sm-offset-3 col-xs-offset-4 col-lg-4 col-sm-4 col-xs-4" onclick="clearValue()">Clear Data</button>
                    <p class="col-xs-1"></p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="col-lg-12 col-md-12 col-sm-12" style="padding:0">
                    <p style="text-align:center;font-size:20px;"><span class="glyphicon glyphicon-arrow-down"></span>Test Equations<span class="glyphicon glyphicon-arrow-down"></span></p>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12" style="padding:0">
                    <div id="display" contenteditable>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12" style="margin-top:10px">
                    <button id="render" class="btn btn-primary btn-sm  col-xs-4" onclick="saveMath()" >Render Math</button>
                    <button style="display:none" id="rerender" class="btn btn-primary btn-sm col-xs-4" onclick="editMath()" >Render Latex </button>
                    <button class="btn btn-danger btn-sm col-sm-offset-3 col-xs-offset-4 col-lg-4 col-md-4 col-xs-4" onclick="clearInsert()" >Clear Data</button>
                    
                    
                </div>   
                <p class="col-lg-12 col-md-12 col-sm-12" style="margin-top:15px"> 
                     <button class="btn btn-success btn-sm  col-xs-3" onclick="getLatex(2)" >Get Latex code</button>
                    <button class="btn btn-success btn-sm col-xs-offset-1 col-xs-3" onclick="getImage(2)">Download Image </button>
                    <button class="btn btn-success btn-sm col-xs-offset-1 col-xs-3" onclick="getMathML()">Get MathML</button>
                </p>   
            </div>

            <div style="display:none" id="latex-title" title="LaTex">
                <textarea style="display:" id="latex-source"></textarea>
            </div> 
        </div>
        <div class="row">
            <div class="row col-md-11 ">
            <p style="font-size:24px">Introduction</p>
            <h5 class=" info"><bold>MathJQ.com is a free online WYSIWYG Latex editor that make formulas intantly.It uses <a href="http://en.wikipedia.org/wiki/WYSIWYG" target="_blank">WYSIWYG(What you see is what you get)</a> Math that is easiest way to help you create Latex, MathML, and Images(through <a href="http://www.codecogs.com/latex/eqneditor.php" target="_blank">CodeCogs.org</a>) quickly.</bold></h5>
            </div>
            <div class="row col-md-11 ">
            <h3>Feature</h3>
            <p class=" info">
                <ul>
                    <li>Let you easily create LaTeX math in your own html pages, blogs, wikis that support Latex </li>
                    <li>Support <a href="http://www.mathjax.org" target="_blank">MathJax</a> engine to testing and display for mathematics</li>
                    <li>Support <a href="http://en.wikipedia.org/wiki/MathML" target="_blank">MathML</a> to generate equations. MathML will allow you to copy and paste math into many applications that understand MathML</li>
                    <li>Support download equations as image through <a href="http://www.codecogs.com/latex/eqneditor.php" target="_blank">CodeCogs.org</a>.</li>
                    <li>Not require plugins in the browser,need to enable Javascript.</li>
                    <li>Help you fix the equations. Paste the Latex code on the Test Equations and the format is <code>$ $</code> and press <code>Render Math</code> button then click on equations.Example: <code>$x^2$</code> . </li>
                </ul>
            </p>         
            </div>
            <div class="row col-md-11 ">
            <h3>Issues</h3>
            <p class=" info">Anyway, The Math Editor will have some bugs that I cannot find at this time. Please don't hesitate send me a report through email to resolve its. Thank you !</div>
        </div>
        <div id="dialog" title="Warning">
          <p>You don't have any formula is rendered Please try to add some formulas or click RenderMath button</p>
        </div>
        <div id="dialog2" title="Warning">
          <p> Empty value. Please try to add some formulas.</p>
        </div>
        <div class="row footer" >
            <p>If you need help, please contact the following email adress: pinmath89@gmail.com</p>  
            
                   
        </div>
        <?php
        // FOR JAVASCRIPT FILES
        $js = '';
        $handle = '';
        $file = '';
        // open the "js" directory
        if ($handle = opendir('Mathjax/doc')) {
            // list directory contents
            while (false !== ($file = readdir($handle))) {
                // only grab file names
                if (is_file('Mathjax/doc/' . $file)) {
                    // insert HTML code for loading Javascript files
                    $js .= '<script src="Mathjax/doc/' . $file . '" type="text/javascript"></script>' . "\n";
                }
            }
            closedir($handle);
            echo $js;
        }
        ?>
        
		<script src="jquery-ui/jquery-ui.js"></script>
        <!--<script src="jq/js/M.min.js"> -->
        <script src="jq/js/MathEditor.js">
		</script>
		  
        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-53772964-1', 'auto');
          ga('send', 'pageview');

        </script>
    </div>
   
</body>

</html>
